let imgCom, ul, preDot;
let pos = 0,
  x = 0,
  direction = "",
  autoBool = false,
  imgList = [],
  bnList = [],
  bool = false,
  circular = [],
  time = 300,
  imgSrcList = [
    "./img/a.png",
    "./img/b.png",
    "./img/c.png",
    "./img/d.png",
    "/img/e.png"
  ];
const WIDTH = 1440;
const HEIGHT = 530;
const LEFT = Symbol();
const RIGHT = Symbol();
const SPEED = 40;
//执行函数
init();
function init() {
  let list = document.getElementById("banner");
  createImg(list);
  createButton(list);
  createCircular(list);
  changeDot();
  setInterval(animation, 16);
  list.addEventListener("mouseenter", mouseHandler);
  list.addEventListener("mouseleave", mouseHandler);
}
//轮播图进入和离开的事件函数
function mouseHandler() {
  if (e.type === "mouseenter") {
    autoBool = false;
    time = 200;
  } else if (e.type === "mouseleave") {
    autoBool = true;
  }
}
// 创建轮播图容器和图片
function createImg(parent) {
  imgCon = ce("div", {
    position: "absolute",
    width: WIDTH * 2 + "px",
    height: HEIGHT + "px",
    left: 0
  });
  for (let i = 0; i < imgSrcList.length; i++) {
    let img = ce("img", {
      width: WIDTH + "px",
      height: HEIGHT + "px"
    });
    img.src = imgSrcList[i];
    imgList.push(img);
  }
  imgCon.appendChild(imgList[0]);
  parent.appendChild(imgCon);
}
//创建左右按钮
function createButton(parent) {
  let but = ["left", "right"];
  for (let i = 0; i < but.length; i++) {
    let img = ce("img", {
      position: "absolute",
      top: (HEIGHT - 60) / 2 + "px",
      left: i === 0 ? "360px" : "none",
      right: i === 1 ? "50px" : "none"
    });
    img.src = `./img/${but[i]}.png`;
    parent.appendChild(img);
    bnList.push(img);
    img.addEventListener("click", bnClickHandler);
  }
}
// 创建轮播图底部点击小圆点
function createCircular(parent) {
  var ul = ce("ul", {
    position: "absolute",
    bottom: "7px",
    right: "525px"
  });
  for (let i = 0; i < imgSrcList.length; i++) {
    let li = ce("li", {
      width: "14px",
      height: "14px",
      borderRadius: "50%",
      border: "2px solid #333",
      float: "left"
    });
    circular.push(li);
    ul.appendChild(li);
  }
  parent.appendChild(ul);
  ul.addEventListener("click", dotClickHandler);
}
//轮播图左右按钮点击事件函数
function bnClickHandler(e) {
  if (bool) return;
  if (e.target.src.includes("left.png")) {
    pos--;
    if (pos < 0) pos = imgSrcList.length - 1;
    direction = RIGHT;
  } else {
    pos++;
    if (pos > imgSrcList.length - 1) pos = 0;
    direction = LEFT;
  }
  createNextImg();
}
//轮播图下面小圆点点击事件函数
function dotClickHandler(e) {
  if (bool) true;
  if (e.target.constructor !== HTMLLIElement) return;
  let index = circular.indexOf(e.target);
  if (index > pos) return;
  direction = index > pos ? LEFT : RIGHT;
  pos = index;
  createNextImg();
}
//创建下一张需要显示图片
function createNextImg() {
  if (direction === LEFT) {
    imgCon.appendChild(imgList[pos]);
    x = 0;
  } else if (direction === RIGHT) {
    imgCon.insertBefore(imgList[pos], imgCon.firstElementChild);
    imgCon.style.left = -WIDTH + "px";
    x = -WIDTH;
  }
  bool = true;
  changeDot();
}
// 切换小圆点
function changeDot() {
  if (preDot) {
    preDot.style.backgroundColor = "rgba(205,205,205,0)";
  }
  preDot = circular[pos];
  preDot.style.backgroundColor = "rgba(205,205,205,0.4";
}
//执行动画函数
function animation() {
  imgConMove();
  autoPlay();
}
// 每16毫秒让图片移动一次
function imgConMove() {
  if (!bool) return;
  if (direction === LEFT) {
    x -= SPEED;
    if (x <= -WIDTH) {
      imgCon.firstElementChild.remove();
      x = 0;
      bool = false;
    }
    imgCon.style.left = x + "px";
  } else if (direction === RIGHT) {
    x += SPEED;
    if (x >= 0) {
      bool = false;
      x = 0;
      imgCon.lastElementChild.remove();
    }
    imgCon.style.left = x + "px";
  }
}
//每16毫秒自动轮播
function autoPlay() {
  if (!autoBool) return;
  time--;
  if (time > 0) return;
  time = 300;
  var evt = new MouseEvent("click");
  bnList[1].dispatchEvent(evt);
}
// 轮播图进入和离开的事件函数
function mouseHandler(e) {
  if (e.type === "mouseenter") {
    autoBool = false;
    time = 300;
  } else if (e.type === "mouseleave") {
    autoBool = true;
  }
}
function ce(type, style) {
  var elem = document.createElement(type);
  Object.assign(elem.style, style);
  return elem;
}
